import { StyleSheet, TouchableOpacity } from 'react-native';
import { Link } from 'expo-router';

import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View, Image } from '@/components/Themed';
import Swiper from 'react-native-swiper';

import { useState } from 'react';
import { tabnavParamList, tabcarParamList, swiperParamList } from '@/constants/globalDataApi';

if (typeof setImmediate === 'undefined') {
  // @ts-ignore
  window.setImmediate = function (callback: Function, ...args: any[]) {
    return setTimeout(callback, 0, ...args);
  };
}

// tabnav 顶部菜单数据
const setTabData = [
  {
    name: '菜单1',
    id: 1,
  },
  {
    name: '菜单2',
    id: 2,
  },
  {
    name: '菜单3',
    id: 3,
  },
  {
    name: '菜单4',
    id: 4,
  },
  {
    name: '菜单5',
    id: 5,
  },
  {
    name: '菜单6',
    id: 6,
  },
  // {
  //   name: '菜单7',
  //   id: 7,
  // },
  // {
  //   name: '菜单8',
  //   id: 8,
  // },
];
const setTabCarData = [
  {
    id: 1,
    name: '菜单一卡片',
    text: '菜单一卡片文字',
  },
  {
    id: 2,
    text: '菜单二卡片文字',
  },
  {
    id: 3,
    name: '菜单三卡片',
    text: '菜单三卡片文字',
  },
  {
    id: 4,
    name: '菜单四卡片',
    text: '菜单四卡片文字',
  },
  {
    id: 5,
    text: '菜单五卡片文字',
  },
  {
    id: 6,
    text: '菜单六卡片文字',
  },
];

const TabNav = ({
  tabnav,
  tabnavActive,
  onChanges,
}: {
  tabnav: tabnavParamList[];
  tabnavActive: number | string;
  onChanges: Function;
}) => {
  function TabNavsActive(val: number | string) {
    onChanges(val);
  }
  function setTabnavcolor(val: number | string) {
    return tabnavActive == val && styles.activeTitle;
  }

  return (
    <View style={[styles.column, styles.row]}>
      {tabnav.map((item) => {
        return (
          <TouchableOpacity
            accessibilityLabel={`Navigate to ${item.name}`}
            key={item.id}
            onPress={() => TabNavsActive(item.id)}
          >
            <Text style={[styles.navTitle, setTabnavcolor(item.id)]}>{item.name}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
const TabCar = ({
  tabcar,
  tabnavActive,
  onChanges,
}: {
  tabcar: tabcarParamList[];
  tabnavActive: number | string;
  onChanges: Function;
}) => {
  return (
    <View style={[styles.carStyle, styles.row]}>
      {tabcar.map((item) => {
        return (
          tabnavActive == item.id && (
            <TouchableOpacity
              style={styles.flexWth}
              key={item.id}
              onPress={() => {
                console.log('1111car', `${item.id}`);
              }}
            >
              {item.name && <Text style={styles.navTitle}>{item.name}</Text>}
              {item.text && <Text style={styles.navTitle}>{item.text}</Text>}
            </TouchableOpacity>
          )
        );
      })}
    </View>
  );
};

export default function TabOneScreen() {
  const [tabnav, setTabnav] = useState<tabnavParamList[]>(setTabData);
  const [tabcar, setTabcar] = useState<tabcarParamList[]>(setTabCarData);
  const [tabnavActive, setTabnavActive] = useState<number | string>(1);
  return (
    <View style={styles.container}>
      <TabNav tabnav={tabnav} tabnavActive={tabnavActive} onChanges={setTabnavActive}></TabNav>
      <TabCar tabcar={tabcar} tabnavActive={tabnavActive} onChanges={setTabnavActive}></TabCar>
      {/* <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" /> */}
      <EditScreenInfo path="app/(tabs)/index.tsx" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // alignItems: 'center',
    justifyContent: 'center',
    // backgroundColor: '#fff',
    margin: 10,
    overflow: 'hidden',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    paddingHorizontal: 10,
  },
  separator: {
    marginVertical: 10,
    height: 1,
    // width: '90%',
  },
  row: {
    flexDirection: 'row',
  },
  column: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'space-between',
    overflow: 'scroll',
    borderBottomWidth: 1,
    borderStyle: 'dashed',
    borderBottomColor: 'red',
    backgroundColor: '#fff',
    // borderEndColor: 'rgba(255,255,255,0.1)',
  },
  navTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    minWidth: 80,
    padding: 10,
    textAlign: 'center',
  },
  activeTitle: {
    backgroundColor: '#409eff',
    color: '#fff',
    borderRadius: 10,
  },
  carStyle: {
    width: '100%',
    height: 100,
    backgroundColor: '#fff',
    marginVertical: 10,
    borderRadius: 10,
    boxSizing: 'border-box',
  },
  flexWth: {
    flex: 1,
  },
});
